<!--装货员端装货记录-->
/* eslint-disable */
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">领卡员端</el-breadcrumb-item>
    <el-breadcrumb-item>历史订单</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="card_search">
	  <div class="add-btn" >
		  <el-date-picker
		          v-model="StartDate"
		          type="date"
		          placeholder="选择开始时间"
				  
		        />
	  </div>
	  <div class="add-btn">
		  <el-date-picker
		          v-model="EndDate"
		          type="date"
		          placeholder="选择截止时间"
		        />
	  </div>
	<el-button @click="udwn">下载</el-button>
    <!-- <el-input
        v-model="queryInfo.cardAccount"
        class="search"
        size="large"
        placeholder="Search..."
        @blur="getOrderInfo"
    /> -->
    <!-- <img src="@/assets/imgs/home/search.png" alt="" @click="getOrderInfo" style="width: 0.4rem; background-color: rgb(57,62,74); cursor: pointer;"> -->
  </div>
  <el-form>
    <el-table
        ref="warRef"
        :data="warList"
        :header-cell-style = "headerStyle"
        :cell-style = "cellStyle"
        class="table"
        @selection-change="handleSelectionChange"
    >
<!--      <el-table-column type="selection"/>-->
      <el-table-column type="expand" min-width="5">
        <template #default="props">
<!--          <div class="good_list">-->
<!--            <dl v-for="item in props.row.detailedEntities" :key="item.id">-->
<!--              <dt><img :src="item.images" alt="good"></dt>-->
<!--              <dd>{{item.dishesName}}</dd>-->

<!--            </dl>-->
<!--          </div>-->
          <div v-if="props.row.vegetableList.length">
            <div class="divSon">蔬菜类</div>
            <el-table
                :data="props.row.vegetableList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.meetList.length">
            <div class="divSon">肉类</div>
            <el-table
                :data="props.row.meetList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.eggList.length">
            <div class="divSon">蛋类</div>
            <el-table
                :data="props.row.eggList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.fishList.length">
            <div class="divSon">水产类</div>
            <el-table
                :data="props.row.fishList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.bestList.length">
            <div class="divSon">特产类</div>
            <el-table
                :data="props.row.bestList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.riceList.length">
            <div class="divSon">大米类</div>
            <el-table
                :data="props.row.riceList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.cornList.length">
            <div class="divSon">玉米类</div>
            <el-table
                :data="props.row.cornList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.fruitList.length">
            <div class="divSon">水果类</div>
            <el-table
                :data="props.row.fruitList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName"  min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity"  min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.birdList.length">
            <div class="divSon">禽类</div>
            <el-table
                :data="props.row.birdList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.meetliveList.length">
            <div class="divSon">畜肉类</div>
            <el-table
                :data="props.row.meetliveList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
          <div v-if="props.row.freeList.length">
            <div class="divSon">赠品类</div>
            <el-table
                :data="props.row.freeList"
                :header-cell-style = "headerStyleSon"
                :cell-style = "cellStyleSon"
                class="tableSon"
            >
              <el-table-column property="dishesName" min-width="2%"></el-table-column>
              <el-table-column property="purchaseQuantity" min-width="2%"></el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column >
      <el-table-column property="orderTime" label="下单日期" min-width="20"/>
	  <el-table-column property="cardType" label="卡类" min-width="20"/>
	  <el-table-column property="userName" label="收货人姓名" min-width="20"/>
	   <el-table-column property="cardAccount" label="卡号" min-width="20"/>
<!--      <el-table-column property="userName" label="昵称" />-->
      <el-table-column property="telephone" label="手机号" show-overflow-tooltip min-width="20"/>
      <el-table-column property="address" label="地址" show-overflow-tooltip min-width="20"/>
      <el-table-column label="送达时间" min-width="20">
        <template #default="scope">{{ scope.row.deliveryTime }}</template>
      </el-table-column>
      <el-table-column property="status" label="订单状态" min-width="15"/>
	  <el-table-column label="操作" min-width="15">
	    <template #default="scope">
	      <!--打印按钮-->
	      <el-button title="查看物流信息" type="primary" :icon="Van" size='large' @click='getLogistics(scope.row.id)' style="border: 1px solid white; background-color: rgb(57,62,74)"></el-button>
	    </template>
	  </el-table-column>
    </el-table>
  </el-form>

  <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="queryInfo.currentPage"
      :page-size="queryInfo.pageSize"
      class="pagination-container"
  />
<!--  查看物流-->
  <el-dialog
      title="查看物流信息"
      :model-value="dialogVisibleGet"
      :close-on-click-modal="false"
      width="50%" @close='dialogVisibleGet = false'>
    <el-table
        ref="warRef"
        :data="wlList"
        :header-cell-style = "headerStyle"
        :cell-style = "cellStyle"
        class="table"
        @selection-change="handleSelectionChange"
    >
      <el-table-column property="logisticsName" label="物流方式" min-width="15%"/>
      <el-table-column property="single" label="物流单号" show-overflow-tooltip min-width="15%"/>
      <!-- <el-table-column label="操作" min-width="25%">
        <template #default="scope">
          <el-button type="primary" :icon="EditPen" size='large' @click='changeLogistics(scope.row.id)' style="border: 1px solid white; background-color: rgb(57,62,74)"></el-button>
          <el-button type="primary" :icon="Delete" size='large' @click='deleteLogistics(scope.row.id)' style="border: 1px solid white; background-color: rgb(57,62,74)"></el-button>
        </template>
      </el-table-column> -->
    </el-table>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleGet = false">确 定</el-button>
        </span>
      </div>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, getCurrentInstance, onMounted} from "vue";
import {useRouter} from "vue-router";
import {
  Download, AddLocation, Van, EditPen, Delete
} from '@element-plus/icons-vue'
import {changeGo, getDetailGo} from "@/service/WarehouseService";
import axios from "axios"
const {proxy} = getCurrentInstance()
// 查看物流
const dialogVisibleGet = ref(false)
const wlList = ref([])
// 渲染
const total = ref(0)
const queryInfo = reactive({
  status: '装配',
  currentPage: 1,
  pageSize: 10
})
const router = useRouter()
let order = reactive([])
// 所有总单提交时间
const options = reactive([])
const orderTime = ref('')
// dateRange
const dateRange = ref('')

// 装配完成的订单
const warList = reactive([])

// 渲染
onMounted(() => {
  getBuyOrder()
})
// 修改el-table默认样式
const headerStyle = () => {
  return {
    'font-size':'20px',
    'color': 'black',
    'text-align': 'center'
  }
}

const cellStyle = () => {
  return {
    'background-color':'rgb(57,62,74)',
    'color': 'white',
    'text-align': 'center'
  }
}

const headerStyleSon = () => {
  return {
    'font-size':'16px',
    'color': 'black',
    'text-align': 'center',
    'margin-top': '-50px !important'
  }
}

const cellStyleSon = () => {
  return {
    'background-color':'rgb(0,152,131)',
    'color': 'white',
    'text-align': 'center'
  }
}
const StartDate=ref("")
const EndDate=ref("")
 function timestampToTime(timestamp) {
	         var date = new Date(timestamp );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
	        const Y = date.getFullYear() + '-';
	        const M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	        const D = date.getDate() + ' ';
	        // const h = date.getHours() + ':';
	        // const m = date.getMinutes() + ':';
	        // const s = date.getSeconds();
	         return Y+M+D;
	     }
		 // 获取物流
		 // const getLog = async oid => {
		   // const {data: res} = await proxy.$http.WarehouseService.getGo({eid: oid})
		   // if (res.code !== 200) proxy.$message.error('查看物流信息失败')
		   // wlList.length = 0
		   // for (let i = 0; i < res.data.length; i++) wlList.push(res.data[i])
		 // }
		 
		 const getLogistics = async oid => {
		   dialogVisibleGet.value = true
		   wlList.value=[]
		   for (let i = 0; i < warList.length; i++){
			   if(warList[i].id==oid){
				   for (let j = 0; j < warList[i].logisticsEntityList.length; j++){
					 wlList.value.push(warList[i].logisticsEntityList[j])
				  }
			   }
		   } 
		   // await getLog(oid)
		   // console.log(wlList);
		 }
		 
// 下载
const udwn=async ()=>{
	let data1 = timestampToTime(StartDate.value)
	let data2 = timestampToTime(EndDate.value)
	console.log(data1);
	console.log(data2);
	const ss= {
		"startDate":data1,
		"endDate":data2
	}

	const token = window.sessionStorage.getItem('token')
	var xhr = new XMLHttpRequest()
	 const baseURL = window.g.BASE_URL+"/opencard/get/poi?startDate="+data1+"&endDate="+data2
	  xhr.open('get', baseURL, true) // get、post都可
	  xhr.responseType = 'blob' // 转换流
	  xhr.setRequestHeader('token', token) // token键值对
	  xhr.onload = function() {
	      const blob = new Blob([this.response], { type: "application/vnd.ms-excel" })
	      var a = document.createElement('a')
	      var url = window.URL.createObjectURL(blob)
	      a.href = url
	      a.download = "订单数据.xlsx" // 文件名
	    a.click()
	    window.URL.revokeObjectURL(url)
	  }
	  xhr.send()
}
// table选择变化
const handleSelectionChange = val => {
  order = val
}

// 获取所有status为已截单的订单
const getBuyOrder = async () => {
  const {data: res} = await proxy.$http.CardService.getOrder(queryInfo)
  // console.log(res);
  if (res.code !== 200) return proxy.$message.error('获取已下单订单数据失败')
  warList.length = 0
  for (let i= 0; i< res.data.records.length; i++) {
    res.data.records[i].vegetableList=[]
    res.data.records[i].meetList=[]
    res.data.records[i].eggList=[]
    res.data.records[i].fishList=[]
    res.data.records[i].bestList=[]
    res.data.records[i].riceList=[]
    res.data.records[i].cornList=[]
    res.data.records[i].fruitList=[]
    res.data.records[i].birdList=[]
    res.data.records[i].meetliveList=[]
    res.data.records[i].freeList=[]
    res.data.records[i].deliveryTime = res.data.records[i].deliveryTime.substring(0,10)
    for (let j = 0; j < res.data.records[i].detailedEntities.length; j++) {
      if (res.data.records[i].detailedEntities[j].dishType === '蔬菜') res.data.records[i].vegetableList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '肉') res.data.records[i].meetList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '蛋') res.data.records[i].eggList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '水产') res.data.records[i].fishList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '特产') res.data.records[i].bestList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '大米') res.data.records[i].riceList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '玉米') res.data.records[i].cornList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '水果') res.data.records[i].fruitList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '禽类') res.data.records[i].birdList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '畜肉') res.data.records[i].meetliveList.push(res.data.records[i].detailedEntities[j])
      if (res.data.records[i].detailedEntities[j].dishType === '赠品') res.data.records[i].freeList.push(res.data.records[i].detailedEntities[j])
    }
    warList.push(res.data.records[i])
	
  }
  total.value = res.data.total
  // console.log(res.data);
}

// 根据分页器切换每页的菜品
const handleCurrentChange = val => {
  queryInfo.currentPage = val
  getBuyOrder()
}

const getOrderInfo = () => {
  getBuyOrder()
}

</script>

<style scoped lang="scss">
	
.search{
  width: 25%;
}
.card_search{
  margin-top: 10px;
  display: flex;
  justify-content: right;
  box-sizing: border-box;
  .el-button{
	  background-color: #393E4A;
	  color: #fff;
	  margin-right: 1rem;
	  height: 100%;
	  font-size:0.2rem;
  }
}

.add-btn {
  height: 100%;
  display: flex;
  margin-right: 0.2rem;
  .el-date-picker {
    font-size: 0.15rem;
    font-weight: bolder;
    background-color: rgb(0,152,131);
    height: 100% !important;
    color: white;
  }
  
}
:deep(.search .el-input__wrapper) {
  background-color: rgb(0,152,131)
}

:deep(.add-btn .el-input__wrapper) {
  background-color: rgb(0,152,131)
}

:deep(.search .el-input__inner) {
  color: white
}

.card_search {
  :deep(.el-input__inner) {
    color: white;
    &::placeholder{
      color: white;
      font-size: 16px
    }
  }
}

:deep(.search .el-icon) {
  color: white;
}


.search_date {
  display: flex;
  margin-right: 50px;
}

.table {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding-top: 50px;
}

.divSon {
  font-weight: bolder;
  font-size: 20px;
}
.tableSon {

}
:deep(.el-table__body) {
  border-collapse: separate;
  border-spacing: 0 20px;
}
:deep(.el-table__body .el-button){
  border: 1px solid white;
  background-color: rgb(0,152,131);
}
:deep(.el-table__body .el-button:hover){
  color: rgb(0,152,131);
  background-color: white !important;
}
:deep(.el-table__body .el-table__expand-icon){
  color: white;
}

.sub_form {
  .item_form {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    p {
      height: 100%;
      line-height: 35px;
    }
    .el-input {
      width: 80%;
    }
  }
}

.good_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  dl {
    width: 150px;
    height: 150px;
    padding: 10px 25px;
    box-sizing: border-box;
    margin-left: 26px;
    margin-top: 20px;
    border: 2px solid rgba(75,66,49,0.8);
    dt{
      width: 100px;
      height: 100px;
      img {
        width: 100%;
      }
    }
    dd{
      height: 20px;
      width: 100px;
      margin-top: 10px;
      text-align: center;
    }
  }
}

.el-pagination{
  position: absolute;
  right: 8%;
  bottom: 2%
}

.item_button {
  margin-top: 15px;
}
</style>
